<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@taglib prefix="s" uri="/struts-tags"  %>
<%
	String operation = request.getParameter("operation");
%>
<%@ page import="com.starbaba.core.web.constant.WebConstants"%>
<%@ page import="com.starbaba.system.user.model.UserVO"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/common/common-css.jsp"%>
<style>
.table>th {
	vertical-align: center;
	background-color: grey;
}
tbody input[type="button"] {
   width:50px;
   height:30px;
   padding: 3px;
}
.tables_scroll{
    overflow-x: auto; 
    overflow-y: auto; 
    height: 500px; 
    width:1500px;"
}
</style>
</head>
<body class="no-skin">
	<div class="page-content">
		<div class="page-content-area">
			<div class="row">
				<div class="col-xs-12 col-sm-12 widget-container-col">
					<div class="widget-box widget-color-blue" style="height: 1450px;">
						<!-- #section:custom/widget-box.options.collapsed -->
						<div class="widget-header widget-header-small">
							<h6 class="widget-title lighter">
								<i class="ace-icon glyphicon glyphicon-th-list"></i>专题信息编辑
							</h6>
							<div class="widget-toolbar no-border">
								<a href="#" data-action="collapse"> <i
									class="ace-icon fa fa-chevron-up"></i>
								</a>
							</div>
						</div>

						<div class="widget-body">
							<div class="widget-main" style="height: 1300px; width: 1500px">
								<form class="form-horizontal" id="form1"
									name="form1" method="post" enctype="multipart/form-data">
									<input type="hidden" id="id" name="id" value="${paramsMap.model.id}"/>
									<input type="hidden" id="product" name="product"/>
									<input type="hidden" name="operator" value="<%=((UserVO) session.getAttribute(WebConstants.SESSION_ATTRIBUTE_USER)).getUsername() %>"/>
									<div>
										<div>
											<label for="from">专题名称</label><br> <input type="text"
												name="name" id="name" placeholder=""
												class="col-xs-12 col-sm-12"
												value="${paramsMap.model.name}">
										</div>
										<br><br>
										<div style="text-align: left">
											<label for="from">专题类型</label><br>
											<div>
												<select class="form-control" id="type" name="type">
												</select>
											</div>
										</div>
										<br>
										<div style="text-align: left;">
											<label for="from">专题Banner图</label><br> <img id="image1"
												name="image1" src="${paramsMap.model.image1}"
												onerror="javascript:this.src='http://img.xmiles.cn/img/void.png'"
												style="height: 100px;" />
										</div>
										<br>
										<div style="text-align: left">
											<label for="coverimg">(建议图片比例：1:1)</label> <input type="file"
												name="img1" class="discovery-input-file" id="img1"
												value="${image1}" />
										</div>
										<br>
										<div style="text-align: left">
											<label for="from">Banner图2</label><br> <img id="image2"
												name="image2" src="${paramsMap.model.image2}"
												onerror="javascript:this.src='http://img.xmiles.cn/img/void.png'"
												style="height: 100px;" />
										</div>
										<br>
										<div style="text-align: left">
											<label for="coverimg">(建议图片比例：1:1)</label> <input type="file"
												name="img2" class="discovery-input-file" id="img2"
												value="${image2}" />
										</div>
										<br>
										<div style="text-align: left">
											<label for="from">缩略图</label><br> <img id="thumbnail"
												name="thumbnail" src="${paramsMap.model.thumbnail}"
												onerror="javascript:this.src='http://img.xmiles.cn/img/void.png'"
												style="height: 100px;" />
										</div>
										<br>
										<div style="text-align: left">
											<label for="coverimg">(建议图片比例：1:1)</label> <input type="file"
												name="img3" class="discovery-input-file" id="img3"
												value="${thumbnail}" />
										</div>
										<br>
										<div>
											<label for="from">描述</label><br> <input type="text"
												name="topic_desc" id="topic_desc" class="col-xs-12 col-sm-12" 
												value="${paramsMap.model.topic_desc}"/>
										</div>	
										<br>
										<div>
											<label for="from">背景颜色</label><br> <input type="text"
												name="background_color" id="background_color" class="col-xs-12 col-sm-12" 
												value="${paramsMap.model.background_color}"/>
										</div>	
									</div>
									
									<div>
										<div style ="margin-top: 50px;margin-bottom: 20px;">
										    <label for="from">产品列表</label>
										    <span style="padding-left:15px;">
											   <input type="button" class="btn btn-success btn-sm no-border" value="新增产品" 
											   style="width: 80px; height: 30px; padding: 3px;" onclick="addRow()">
											</span>
										</div>

										<div class="tables_scroll">
											<table id="jquery-table"
												class="table table-striped table-bordered table-hover">
												<thead>
													<tr>
														<th>位置</th>
														<th>排序</th>
														<th>广告图片</th>
														<th>活动链接</th>
														<th>选择产品</th>
														<th>产品描述</th>
														<th>标签</th>
														<th>指定上线时间</th>
													    <th>指定下线时间</th>
													    <th>每天上线时间</th>
													    <th>每天下线时间</th>
														<th>操作</th>
													</tr>
												</thead>
												<tbody id="tbody">
												</tbody>
											</table>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="clearfix form-actions">
				<div class="col-md-offset-3 col-md-9">
					<button class="btn  btn-inverse  no-border " onclick="doCancle()"
						id="delete">
						<i class="ace-icon fa fa-undo bigger-160"></i> 取消
					</button>
					&nbsp; &nbsp; &nbsp;
					<button id="btn-save" name="btn-save"
						class="btn  btn-success  no-border" type="button"
						onclick="doSave()">
						<i class="ace-icon fa fa-floppy-o bigger-160"></i> 保存
					</button>
				</div>
			</div>
		</div>
	</div>

	<%@ include file="/common/common-js.jsp"%>
	<%@ include file="/discovery/maxlength.jsp"%>
	<script type="text/javascript" src="${ctx}/ace/js/maxlength.js"></script>
	<script type="text/javascript" src="${ctx}/js/wangEditor-1.3.11.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script>
	<script type="text/javascript" src="${ctx}/js/common-loading.js"></script>
	<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
	<script type="text/javascript" src="${ctx}/ace/js/jquery.dataTables.min.js"></script>
	<script>
		$(function() {
			$('#img1').change(function() {
				var file = this.files[0];
				var r = new FileReader();
				r.readAsDataURL(file);
				$(r).load(function() {
					$('#image1').attr('src', this.result);
					$('#img1').attr("value", this.result);
				});
			});
			
			$('#img2').change(function() {
				var file = this.files[0];
				var r = new FileReader();
				r.readAsDataURL(file);
				$(r).load(function() {
					$('#image2').attr('src', this.result);
					$('#img2').attr("value", this.result);
				});
			});
			
			$('#img3').change(function() {
				var file = this.files[0];
				var r = new FileReader();
				r.readAsDataURL(file);
				$(r).load(function() {
					$('#thumbnail').attr('src', this.result);
					$('#img3').attr("value", this.result);
				});
			});
		});
		
		$(document).ready(function() {
			//queryLoanActivity();
			loadLoanTopicType();
			getLoanTopicProductRow();
		});
		
	    function getLoanTopicProductRow() {
			
			var product_array = {};
			
			$.ajax({
				  type : 'POST',
				  dataType : 'json',
				  url : ctx + "/loanactivity/queryloanlist.action?rand="+ Math.random(),
				  timeout : 300000,
				  success : function(resp) {
					var data = resp["aaData"];
					for (var i = 0; i < data.length; i++) {
						product_array[data[i]["id"]] = data[i]["name"];
					}
					queryTopicProductList(product_array);
				  },
			});
		}
	    
	    // 查询贷款专题产品列表
	    function queryTopicProductList(product_array){
	    	
	    	var topicId = $("#id").val();
	    	$.ajax({
				type : "POST",
				dataType : 'json',
				url : ctx + "/loantopic/getTopicProductInfo.action",
				data : {
					id : topicId,
				},
				success : function(resp) {
					var tbody = "";
					var data = resp.aaData;
					
					if (data.length == 0){
						 tbody += "<tr>";
						 tbody += "<td style='width: 10%'>";
						 tbody += "<input id='position' name='position' class='col-xs-12 col-sm-12' value='1' /></td>";
						 tbody += "<td><i class='glyphicon glyphiconfir glyphicon-chevron-up' onclick='moveTrUp(this)'></i><br>";
						 tbody += "<i class='glyphicon glyphicon-chevron-down' onclick='moveTrDown(this)'></i></td>";
						 tbody += "<td style='width: 10%'>";
						 tbody += "<img style='width: 150px;margin-bottom: 10px;' id='thumbnail' name='thumbnail' src='http://img.xmiles.cn/img/void.png'/>";
						 tbody += "<input type='file' id='myFile' name='myFile' class='discovery-input-file' onchange='uploadFile(this)'/>";
						 tbody += "<input type='hidden'/></div></td>";
						 tbody += "<td style='width: 10%'>";
						 tbody += "<input id='activity_url' name='activity_url' class='col-xs-12 col-sm-12' /></td>";
						 tbody += "<td><select id='loan_product' name='loan_product'>";
						 $.each(product_array,function(key,value){
							 tbody += "<option value='" + key + "'>" + value + "</option>";
						 });
						 tbody += "</select></td>";
						 tbody += "<td style='width: 10%'><input id='desc' name='desc' class='col-xs-12 col-sm-12'/></td>";
						 tbody += "<td style='width: 10%'><input id='tag' name='tag' class='col-xs-12 col-sm-12'/></td>";
						 
						 tbody += "<td style='width: 15%'><input id='online_time' name='online_time' type='text' class='date-picker input-sm form-control'/></td>";
						 tbody += "<td style='width: 15%'><input id='offline_time' name='offline_time' type='text' class='date-picker input-sm form-control'/></td>";
						 tbody += "<td style='width: 10%'><input id='every_day_online_time' name='every_day_online_time' type='text' class='date-picker-time input-sm form-control'/></td>";
						 tbody += "<td style='width: 10%'><input id='every_day_offline_time' name='every_day_offline_time' type='text' class='date-picker-time input-sm form-control'/></td>";
						 
						 tbody += "<td><button class='btn btn-primary btn-sm no-border' onclick='delRow(this)'>删除</button>";
						 tbody += "</td>";
						 tbody += "</tr>";
					} else {
					  $.each(data, function(index, n) {
						 tbody += "<tr>";
						 tbody += "<td style='width: 10%'>";
						 tbody += "<input id='position' name='position' class='col-xs-12 col-sm-12' value='"+ (data[index].position == null ? "" : data[index].position) +"' /></td>";
						 tbody += "<td><i class='glyphicon glyphiconfir glyphicon-chevron-up' onclick='moveTrUp(this)'></i><br>";
						 tbody += "<i class='glyphicon glyphicon-chevron-down' onclick='moveTrDown(this)'></i></td>";
						 tbody += "<td style='width: 10%'>";
						 tbody += "<div><img style='width: 150px;margin-bottom: 10px;' id='thumbnail' name='thumbnail' src='"+ (data[index].ad_image == null ? "http://img.xmiles.cn/img/void.png" : data[index].ad_image) +"'/>";
						 tbody += "<input type='file' id='myFile' name='myFile' class='discovery-input-file' onchange='uploadFile(this)'/>"
					     tbody += "<input type='hidden' value='"+ (data[index].ad_image == null ? "" : data[index].ad_image) +"'/></div></td>";
						 tbody += "<td style='width: 10%'>";
						 tbody += "<input id='activity_url' name='activity_url' class='col-xs-12 col-sm-12' value='"+ (data[index].activity_url == null ? "" : data[index].activity_url) +"'/></td>";
						 tbody += "<td><select id='loan_product' name='loan_product'>";
						 $.each(product_array,function(key,value){
							if (key == data[index].product_id) {
							    tbody += "<option value='" + key + "' selected>" + value + "</option>";
							} else {
								tbody += "<option value='" + key + "'>" + value + "</option>";
							}
						 });
						 tbody += "</select></td>";
						 tbody += "<td style='width: 10%'><input id='desc' name='desc' ";
						 tbody += " class='col-xs-12 col-sm-12' value = '"+ (data[index].product_desc == null ? "" : data[index].product_desc) +"' /></td>";
						 tbody += "<td style='width: 10%'><input id='tag' name='tag' ";
						 tbody += " class='col-xs-12 col-sm-12' value = '"+ (data[index].tag == null ? "" : data[index].tag) +"' /></td>";
						 
						 tbody += "<td style='width: 15%'><input id='online_time' name='online_time' type='text' ";
						 tbody += " class='date-picker input-sm form-control' style='padding-left: 0px' value = '"+ (data[index].online_time == null ? "" : data[index].online_time) +"' /></td>";
						 
						 tbody += "<td style='width: 15%'><input id='offline_time' name='offline_time' type='text' ";
						 tbody += " class='date-picker input-sm form-control' value = '"+ (data[index].offline_time == null ? "" : data[index].offline_time) +"' /></td>";
						 
						 tbody += "<td style='width: 10%'><input id='every_day_online_time' name='every_day_online_time' type='text' ";
						 tbody += " class='date-picker-time input-sm form-control' value = '"+ (data[index].every_day_online_time == null ? "" : data[index].every_day_online_time) +"' /></td>";
						 
						 tbody += "<td style='width: 10%'><input id='every_day_offline_time' name='every_day_offline_time' type='text' ";
						 tbody += " class='date-picker-time input-sm form-control' value = '"+ (data[index].every_day_offline_time == null ? "" : data[index].every_day_offline_time) +"' /></td>";
						
						 
						 tbody += "<td><button class='btn btn-primary btn-sm no-border' onclick='delRow(this)'>删除</button>";
						 tbody += "</td>";
						 tbody += "</tr>";
					 });
				  }
				  $("#tbody").html(tbody);
				  $(".date-picker").datetimepicker({autoclose:true}).next().on(ace.click_event, function(){
						$(this).prev().focus();
					});
					$(".date-picker-time").datetimepicker({
						autoclose:true,
						format : "hh:ii:ss"
						}).next().on(ace.click_event, function(){
						$(this).prev().focus();
					});
				  $("#tbody select[name='loan_product']").combobox();
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
				},
				
		    });
	    }
	    
	    function uploadFile(obj) {
	    	
	    	var options = {
	    		url : "${ctx}/module/fileupload/fileUpload.action", 
	    		type : "POST",
	    		dataType : "json",
	    		beforeSend: function(){
	    			$(".load_bg,.load_img").show();
	    		},
	    		success : function(data) {
	    			var file = obj.files[0];
	    			var r = new FileReader();
	    			r.readAsDataURL(file);
	    			$(r).load(function() {
	    				$(obj).prev().attr('src', this.result);
	    			});
	    			$(obj).next().attr('value', data);
	    		},
	    		error: function(XMLHttpRequest, textStatus, errorThrown){
	    			alert(textStatus);
	    		},
	    		complete: function(){
	    			$(".load_bg,.load_img").hide();
	    		}
	    	}; 
	    	$('#form1').ajaxSubmit(options); 
	    };
	    

		function doCancle() {
			try {
				if (parent) {
					parent.parent['__extdialog_active'].dialog('close');
				}
			} catch (e) {
				window.history.back();
			}
		}

		function doSave() {
			if ($.isBlank($("#name").val())) {
				parent.bootbox.alert("专题名称不能为空");
				return;
			}
			$("#btn-save").attr("disabled", "disabled");
			saveForm();
		}

		function saveForm() {
			var productData = new Array();
			$("tbody tr").each(function() {
				var array = new Array();
				$("input,select", this).each(function() {
					// select的值
					array.push($(this).val());
				});
				productData.push(array.join());
			});

			$("#product").val(productData.join(";"));
			var saveUrl = ctx + "/loantopic/save.action";
			var options = {
				url : saveUrl,
				type : "POST",
				dataType : "json",
				beforeSend : function() {
					$(".load_bg,.load_img").show();
				},
				success : function(data) {
					alert(data["result"]["msg"]);
					parent.parent['__extdialog_active'].dialog('close');
					parent.query_any();
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
					console.log(XMLHttpRequest, textStatus, errorThrown);
				},
				complete : function() {
					$(".load_bg,.load_img").hide();
				}
			};
			$('form[name="form1"]').ajaxSubmit(options);
		}

		//查询所有贷款活动
		function queryLoanActivity() {
			
			$.ajax({
				  type : 'POST',
				  dataType : 'json',
				  url : ctx + "/loanactivity/queryloanlist.action?rand="+ Math.random(),
				  timeout : 300000,
				  success : function(resp) {
					//			hideLoading();
					var data = resp["aaData"];
					var loan_product = "";
					for (var i = 0; i < data.length; i++) {
						loan_product += '<option value="' + data[i]["id"] + '">'
								+ data[i]["name"] + '</option>';
					}
					$("select[name='loan_product']").html(loan_product);
				  },
			});
		}

		function addRow() {
			
			var tbody = "";
			var product_array = {};
			
			$.ajax({
				  type : 'POST',
				  dataType : 'json',
				  url : ctx + "/loanactivity/queryloanlist.action?rand="+ Math.random(),
				  timeout : 300000,
				  success : function(resp) {
					 var data = resp["aaData"];
					 for (var i = 0; i < data.length; i++) {
						product_array[data[i]["id"]] = data[i]["name"];
					 }
					 
					 tbody += "<tr>";
					 tbody += "<td style='width: 10%'>";
					 tbody += "<input id='position' name='position' class='col-xs-12 col-sm-12' value='1' /></td>";
					 tbody += "<td><i class='glyphicon glyphiconfir glyphicon-chevron-up' onclick='moveTrUp(this)'></i><br>";
					 tbody += "<i class='glyphicon glyphicon-chevron-down' onclick='moveTrDown(this)'></i></td>";
					 tbody += "<td style='width: 10%'>";
					 tbody += "<img style='width: 150px;margin-bottom: 10px;' id='thumbnail' name='thumbnail' src='http://img.xmiles.cn/img/void.png'/>";
					 tbody += "<input type='file' id='myFile' name='myFile' class='discovery-input-file' onchange='uploadFile(this)'/>";
					 tbody += "<input type='hidden'/></div></td>";
					 tbody += "<td style='width: 10%'>";
					 tbody += "<input id='activity_url' name='activity_url' class='col-xs-12 col-sm-12' /></td>";
					 tbody += "<td><select id='loan_product' name='loan_product'>";
					 $.each(product_array,function(key,value){
						 tbody += "<option value='" + key + "'>" + value + "</option>";
					 });
					 tbody += "</select></td>";
					 tbody += "<td style='width: 10%'><input id='desc' name='desc' class='col-xs-12 col-sm-12'/></td>";
					 tbody += "<td style='width: 10%'><input id='tag' name='tag' class='col-xs-12 col-sm-12'/></td>";
					 
					 tbody += "<td style='width: 15%'><input id='online_time' name='online_time' class='date-picker input-sm form-control'/></td>";
					 tbody += "<td style='width: 15%'><input id='offline_time' name='offline_time' class='date-picker input-sm form-control'/></td>";
					 tbody += "<td style='width: 10%'><input id='every_day_online_time' name='every_day_online_time' class='date-picker-time input-sm form-control'/></td>";
					 tbody += "<td style='width: 10%'><input id='every_day_offline_time' name='every_day_offline_time' class='date-picker-time input-sm form-control'/></td>";
					
					 tbody += "<td><button class='btn btn-primary btn-sm no-border' onclick='delRow(this)'>删除</button>";
					 tbody += "</td>";
					 tbody += "</tr>";
					 
					 $("#tbody").append(tbody);
					 $(".date-picker").datetimepicker({autoclose:true}).next().on(ace.click_event, function(){
							$(this).prev().focus();
					  });
					$(".date-picker-time").datetimepicker({
						autoclose:true,
						format : "hh:ii:ss"
						}).next().on(ace.click_event, function(){
						$(this).prev().focus();
					});
					 $("#tbody tr:last select[name='loan_product']").combobox();
				},
			});
		}

		function delRow(obj) {
			if ($("#tbody tr").length > 1) {
				$(obj).parent().parent().remove();
			}
		}

		function moveTrUp(obj) {
			var objParentTR = $(obj).parent().parent();
			var prevTR = objParentTR.prev();
			if (prevTR.length > 0) {
				var name = prevTR.attr('name');
				if (name == 'header') {
				} else {
					prevTR.insertAfter(objParentTR);
				}
			}
		}
		
		//时间控件
		jQuery(function($) {
			$(".date-picker").datetimepicker({autoclose:true}).next().on(ace.click_event, function(){
						$(this).prev().focus();
			});
			$(".date-picker-time").datetimepicker({
				autoclose:true,
				format : "hh:ii:ss"
				}).next().on(ace.click_event, function(){
				$(this).prev().focus();
			});
		});

		//向下移动  
		function moveTrDown(obj) {
			var objParentTR = $(obj).parent().parent();
			var nextTR = objParentTR.next();
			if (nextTR.length > 0) {
				nextTR.insertBefore(objParentTR);
			}
		}
		
		//贷款专题类型
		function loadLoanTopicType() {
			$.ajax({
				type : 'POST',
				dataType : 'json',
				url : ctx + "/loantopic/getTopicType.action?rand="
						+ Math.random(),
				timeout : 300000,
				success : function(resp) {
					
					var data = resp["aaData"];
					var typeId = "${paramsMap.model.type}";
					var typeList = '<option value="">请选择</option>';

					for (var i = 0; i < data.length; i++) {
						var id = data[i]["id"];
						if (id == typeId){
						    typeList += '<option value="' + id + '" selected>'+ data[i]["name"] + '</option>';
						}else{
							typeList += '<option value="' + id + '">'+ data[i]["name"] + '</option>';
						}
					}
					$("#type").html(typeList);
				},
			});
		}
	</script>
</body>
</html>